<template>
	<view :class="cate_id==1?'content1':'content2'">
		<view class="topBox">
			<view class="searchBox">
				<image mode="widthFix" class="red_search" src="/static/search.png"></image>
				<input class="input" placeholder="搜索关键词" :value="value" @input="inpsearch" />
			</view>
		</view>
		<!-- <view class="topbg"></view> -->
		<image class="list1" v-if="cate_id==1" src="../../static/list1.png" mode="widthFix"></image>
		<image class="list1" v-if="cate_id==2" src="../../static/list2.png" mode="widthFix"></image>
		<view class="shopBox">
			<view class="shol">
				<view class="shop" v-for="(item,index) in storeList" :key="index" v-if="index%2==0">
					<navigator :url="'/pages/index/details?store_id='+item.id">
						<image mode="widthFix" :src="item.activity_logo"></image>
						<view class="shopname">{{item.activity_name}}</view>
						<view class="address">
							<image class="adimg" mode="widthFix" src="/static/icon.png"></image>
							<view>{{item.address}}</view>
						</view>
						<view class="latlon">{{item.distance}}</view>
					</navigator>
				</view>
			</view>
			<view class="shor">
				<view class="shop" v-for="(item,index) in storeList" :key="index" v-if="index%2==1">
					<navigator :url="'/pages/index/details?store_id='+item.id">
						<image mode="widthFix" :src="item.activity_logo"></image>
						<view class="shopname">{{item.activity_name}}</view>
						<view class="address">
							<image class="adimg" mode="widthFix" src="/static/icon.png"></image>
							<view>{{item.address}}</view>
						</view>
						<view class="latlon">{{item.distance}}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeList: [],
				cate_id: '1',
				page: 1,
				keyword: '',
				latitude: '',
				longitude: '',
			}
		},
		onLoad(e) {
			var that = this;
			that.cate_id = e.cate_id;
			if (that.cate_id == 1) {
				uni.setNavigationBarTitle({
					title: '街镇调委会和工作室',
				})
			}
			if (that.cate_id == 2) {
				uni.setNavigationBarTitle({
					title: '专行业调委会',
				})
			}

			that.API_storeList();
		},
		methods: {
			inpsearch(e) {
				this.storeList = [];
				this.keyword = e.detail.value;
				this.page = 1;
				this.API_storeList();
			},
			onReachBottom() {
				this.API_storeList();
			},
			API_storeList() {
				var that = this;
				that.ran
					.request('index/Home/storeList', {
						cate_id: that.cate_id,
						longitude: that.longitude,
						latitude: that.latitude,
						keyword: that.keyword,
						page: that.page,
						limit: 10,
					})
					.then(res => {
						console.log(res);
						if (res.code == 0) {
							that.storeList = [...that.storeList, ...res.data];
							that.page = that.page + 1;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							// that.API_GPSstoreList()
						}
					});
			},
			API_GPSstoreList() {
				var that = this;
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						latitude = Number(res.latitude);
						longitude = Number(res.longitude);
					},
					complete: function(res) {
						that.ran
							.request('index/Home/storeList', {
								cate_id: that.cate_id,
								longitude: that.longitude,
								latitude: that.latitude,
								keyword: that.keyword,
								page: that.page,
								limit: 10,
							})
							.then(res => {
								console.log(res);
								if (res.code == 0) {
									that.storeList = [...that.storeList, ...res.data.data];
									that.page = that.page + 1;
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});


					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 750rpx;
	}

	.content1 {
		min-height: 100vh;
		background: linear-gradient(#EE186D, #F5A521);
	}

	.content2 {
		min-height: 100vh;
		background: linear-gradient(#24A4FF, #78FFD6);
	}

	.list1 {
		width: 750rpx;
		display: block;
		margin: 0 auto;
	}

	page {
		// background: #f2f2f2;
	}

	.shopBox {
		width: 730rpx;
		margin-left: 20rpx;
		overflow: hidden;
		border-radius: 20rpx;
		display: inline-block;

		.shol {
			width: 345rpx;
			display: inline-block;
			vertical-align: top;
			margin-right: 20rpx;
		}

		.shor {
			width: 345rpx;
			display: inline-block;
			vertical-align: top;
		}

		.shop {
			width: 345rpx;
			float: left;
			margin-right: 20rpx;
			margin-top: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			image {
				width: 345rpx;
				height: 240rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			.shopname {
				padding: 0 20rpx;
				line-height: 1.4;
				font-size: 30rpx;
			}

			.address {
				font-size: 26rpx;
				padding: 0 20rpx;
				line-height: 1.4;
				overflow: hidden;
				color: #666;
				margin: 10rpx 0;
				display: flex;
				align-items: center;

				.adimg {
					// flex: 1;
					width: 40rpx;
					display: block;
				}

				view {
					flex: 2;
				}
			}

			.latlon {
				padding: 0 20rpx;
				font-size: 26rpx;
			}
		}
	}

	.topbg {
		width: 750rpx;
		height: 139rpx;
	}

	.topBox {
		width: 710rpx;
		padding: 0 20upx;
		overflow: hidden;
		z-index: 99999999;
		// background: #fff;

		.searchBox {
			width: 660upx;
			height: 80upx;
			overflow: hidden;
			float: left;
			background: #fff;
			border-radius: 40upx;
			padding: 0 20upx;
			margin: 30upx 0;
			background: rgba(255, 255, 255, 0.8);

			.input {
				width: 500upx;
				float: left;
				height: 80upx;
				line-height: 80upx;
				padding: 0 15upx;

			}

			.red_search {
				width: 40upx;
				height: 40upx;
				float: left;
				margin-top: 20upx;
			}
		}


	}
</style>